<template>
  <div class="system-dic-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
      </div>
      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" align="center" prop="id" />
        <el-table-column label="网站名" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="网站地址" align="center" prop="url" :show-overflow-tooltip="true" />
        <el-table-column label="采集状态" align="center" prop="statusBy" :show-overflow-tooltip="true">
          <template #default="scope">
            <el-button size="small" type="text" v-if="scope.row.statusBy=='1'">采集中</el-button>
            <el-button size="small" type="text" v-if="scope.row.statusBy=='0'">采集完成</el-button>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
        <el-table-column label="创建时间" align="center" prop="createdAt" width="110" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="text" @click="onOpenEditDic(scope.row)">启动采集</el-button>
            <el-button size="small" type="text" @click="onDownload(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="tableData.total>0"
          :total="tableData.total"
          v-model:page="tableData.param.pageNum"
          v-model:limit="tableData.param.pageSize"
          @pagination="dataList"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
import {toRefs,reactive,onMounted,ref,defineComponent,unref,getCurrentInstance} from 'vue';
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
import EditConfig from '/@/views/system/config/component/editConfig.vue';
import {deleteConfig, getConfigList} from "/@/api/system/config";
import {downloadCollection, editCollectionList, getCollectionList} from "/@/api/system/collection";



// 定义接口来定义对象的类型
interface TableDataRow {
  id: number;
  name: string;
  url: string;
  statusBy: number,
  configType: number,
  remark: string,
  createdAt: string,
}
interface TableDataState {
  ids:number[];
  tableData: {
    data: Array<TableDataRow>;
    total: number;
    loading: boolean;
    param: {
      pageNum: number;
      pageSize: number;
      configName:string;
      configKey:string;
      configType:string;
      dateRange:string[];
    };
  };
}

export default defineComponent({
  name: 'apiV1SystemDictDataList',
  components: { EditConfig },
  setup() {
    const {proxy} = getCurrentInstance() as any;
    const addDicRef = ref();
    const editDicRef = ref();
    const queryRef = ref();
    const {sys_yes_no} = proxy.useDict('sys_yes_no')

    const state = reactive<TableDataState>({
      ids:[],
      tableData: {
        data: [],
        total: 0,
        loading: false,
        param: {
          dateRange:[],
          pageNum: 1,
          pageSize: 10,
          configName:'',
          configKey:'',
          configType:''
        },
      },
    });
    // 初始化表格数据
    const initTableData = () => {
      dataList()
    };

    const dataList=()=>{
      getCollectionList(state.tableData.param).then((res:any)=>{
        state.tableData.data = res.data.list;
        state.tableData.total = res.data.total;
      });
    };

    const onOpenEditDic=(row: TableDataRow)=>{
      console.log("启动数据抓取。。。");

      editCollectionList({"id":row.id,"status":1}).then(()=>{
        ElMessage.success('启动数据抓取');
        initTableData();
      });
    };

    //
    const onDownload=(row: TableDataRow)=>{
      downloadCollection(row.id).then((res:any)=>{
        //下载内容
        const data = res.data;
        if(!res.data){
          return;
        }

        //设置下载文件名
        const pat = new RegExp("(?<=filename=).*");
        let contentDisposition = "";

        if(res.headers["content-disposition"]) contentDisposition = res.headers["content-disposition"];
        if(res.headers["content-Disposition"]) contentDisposition = res.headers["content-Disposition"];
        const result = pat.exec(contentDisposition);

        let fileName = result && result[0];

        if(fileName == undefined){
          fileName = "下载.csv";
        }else{
          fileName = decodeURIComponent(fileName);
        }

        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download",fileName);
        document.body.appendChild(link);
        link.click()
        console.log("res===",res)

      });
    };

    // 页面加载时
    onMounted(() => {
      initTableData();
    });



    return {
      addDicRef,
      editDicRef,
      queryRef,
      sys_yes_no,
      onOpenEditDic,
      onDownload,
      dataList,
      ...toRefs(state),
    };
  },
});
</script>
